<template>
  <div class="u-login-container" @keyup.enter="handleSubmit">
    <div class="left-content">
      <div class="title-content">
        <h1>用电安全物联网平台</h1>
      </div>
      <div class="text-content">
        <p>防患于未&nbsp;&nbsp;"燃"</p>
        <p>让城市更安全</p>
      </div>
      <div class="clould_1"><img src="~@/assets/img/cloud_1.png" alt="" /></div>
      <div class="clould_2"><img src="~@/assets/img/cloud_2.png" alt="" /></div>
      <div class="clould_4"><img src="~@/assets/img/cloud_4.png" alt="" /></div>
    </div>
    <div class="right-content">
      <div class="clould_1"><img src="~@/assets/img/cloud_1.png" alt="" /></div>
      <div class="clould_2"><img src="~@/assets/img/cloud_2.png" alt="" /></div>
      <div class="clould_3"><img src="~@/assets/img/cloud_3.png" alt="" /></div>
      <div class="login-form-container">
        <div class="title-img">
          <img :src="imageUrl" :alt="imageAlt" />
        </div>
        <div class="form-container">
          <Form
            class="no-border"
            ref="formInline"
            :model="formInline"
            :rules="rulesInline"
          >
            <FormItem prop="username" class="custom-input">
              <Input
                type="text"
                v-model="formInline.username"
                placeholder="请输入用户名..."
              >
                <Icon type="ios-person-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem prop="password" class="no-margin-bottom custom-input">
              <Input
                type="password"
                v-model="formInline.password"
                placeholder="请输入密码..."
              >
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
          </Form>
        </div>
        <div class="form-control">
          <Button
            type="primary"
            long
            :loading="loadingInstance"
            @click="handleSubmit"
            >登录</Button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "./login.scss";
import { mapActions, mapGetters } from "vuex";
import { getUserInfo } from "@/api";
export default {
  data() {
    return {
      imageAlt: "胜顶智控",
      formInline: {
        username: "",
        password: ""
      },
      loadingInstance: false,
      rulesInline: {
        username: [
          {
            required: true,
            message: "账号不能为空",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(["rname"]),
    imageUrl() {
      this.imageAlt = "胜顶智控";
      return require("@/assets/img/full_logo.png");
    }
  },
  methods: {
    ...mapActions(["LoginByUsername"]),
    handleSubmit() {
      let vm = this;
      this.$refs.formInline.validate(valid => {
        if (valid) {
          this.loadingInstance = true;
          this.LoginByUsername({ ...this.formInline })
            .then(res => {
              getUserInfo().then(res => {
                if (res.code != 200) {
                  this.$Message.error(res.message);
                  return false;
                }

                if (res.data.rname === "ROLE_PHT") {
                  this.$Message.info("该账号没有权限");
                  this.loadingInstance = false;
                } else {
                  this.$Message.success("登录成功");
                  this.loadingInstance = false;
                  this.$router.push({
                    path: "/"
                  });
                }
              });
            })
            .catch(err => {
              console.log(err);
              this.$Message.error(err.message);
              this.loadingInstance = false;
            });
        }
      });
    }
  }
};
</script>
